<template>
    <div style="height:100%;">
        <div style="display:inline-block; width:46%; height:100%; vertical-align: top;">
            <ChartWrapper :option="option" />
        </div>
        <div style="display:inline-block; width:54%; height:100%; vertical-align: top">
            <div style="display:flex; height:100%; align-items: center;">
                <TableWrapper :style="{ width:'100%' }" :isOpacity="true" :pageInfo="pageInfo" :noPadding="true" :hasControls="false" :sourceData="tableData" :column="column" />
            </div>
        </div>
    </div>
</template>
<script setup>      
    import { watch, reactive, ref, h, onMounted } from 'vue';
    import ChartWrapper from '@/components/ChartWrapper.vue';
    import { getInspectionAnalysis } from '@/api/board.js';
    import { useGlobalStore } from '@/stores/global.js';
    import TableWrapper from '@/components/TableWrapper/index.vue';
    const global = useGlobalStore();
    const option = ref({});
    const tableData = ref([]);
    const pageInfo = reactive({ page:1, pageSize:10 });
    const column = [
        { label:'', width:'22%', hasTpl:true, render:row=>{
            return {
                com:h('div', { style:{ display:'flex', alignItems:'center' } }, [h('img', { src:row.icon, style:{ width:'1.5rem', marginRight:'var(--xsPadding)'} }), h('span', { style:{ color:row.color } }, row.name)])
            }
        } },   
        { label:'巡检总数', width:'28%', hasTpl:true, render:row=>{
            return { com:h('div', { style:{ fontSize:'var(--18FontSize)', color:row.color }}, row.sum ) }
        }},
        { label:'已完成', width:'25%', hasTpl:true, render:row=>{
            return { com:h('div', { style:{ fontSize:'var(--18FontSize)', color:'#fff' }}, row.finished ) }
        } },
        { label:'待完成', width:'25%', hasTpl:true, render:row=>{
            return { com:h('div', { style:{ fontSize:'var(--18FontSize)', color:'#fff' }}, row.unfinished ) }
        }},
    ]
    onMounted(()=>{
        getInspectionAnalysis()
        .then(res=>{
            if ( res.data.code === 200 ) {
                let data = res.data.data || [];
                const typeArr = [], temp = [];
                global.labelList.concat().reverse().forEach(item=>{
                    
                    let obj = data.filter(i=>i.labelName === item.label )[0];
                    let arr = [];
                    let color = item.color.substring(0, item.color.length - 2) + '0.3)';
                    let finishVal = obj ? obj.finishedCount : 0;
                    let unfinishVal = obj ? obj.notFinishedCount : 0;
                    arr.push({ name:'已完成', value:finishVal,  itemStyle:{ color:item.color }});
                    arr.push({ name:'待完成', value:unfinishVal,  itemStyle:{ color:color }});
                    typeArr.push({ name:item.label, data:arr });
                    temp.push({ name:item.label, finished:finishVal, icon:item.icon, color:item.color, unfinished:unfinishVal, sum:Math.round(finishVal + unfinishVal) })
                });
                
                tableData.value = temp;
                // 构建巡检类型的数据
                
                option.value = {
                    tooltip:{
                        show:true,
                        trigger:'axis'
                    },
                    series:typeArr.map((item, index)=>({
                        name: item.name,
                        type: 'pie',
                        radius: [`${ 30 + index * 14 }%`, `${ 30 + index * 14 + 6 }%`],
                        // radius:['70%', '76%'],
                        // avoidLabelOverlap: false,
                        label: {
                          show: false,
                        },
                        startAngle:0,
                        emphasis: {
                          label: {
                            show: false,
                            fontSize:16,
                            fontWeight: 'bold'
                          },
                          labelLine:{
                            show:false,
                            
                          }
                        },
                       
                        data: item.data
                    }))
                    
                }
            }
        })
    })
</script>